<a name="CommonPlugin">
<!--CommonPluginBegin><XML><name>html网页公共</name><type>22</type><id>4</id></XML><XSL><xsl:template match="TMPL"></xsl></XSL><CommonPluginEnd-->
</a>
<style type="text/css">
#wraper{position:relative; width::250px;overflow:hidden;}
#slider{position:absolute;}
#pannel{position:absolute;width:12px;height:370px;background-color:#EDEDEB;}
#drag{position:absolute;width:12px;height:80px;background-color:#BCBCBA;cursor:pointer;}
</style>
<body>
<script type="text/javascript" src="../js/jquery-mini.js"></script>
<div class="top1">
<a name="CommonPlugin">
<!--CommonPluginBegin><XML><name>html网页公共</name><type>22</type><id>9</id></XML><XSL><xsl:template match="TMPL"></xsl></XSL><CommonPluginEnd-->
</a>

<div class="ff1">
    <div class="flash1">
    <div class="gg">
    <div class="gg_mm wrapper">
        <div class="gg_le">
             <div class="gg_le_bt"><a name="Plugin">
<!--PluginBegin><XML><name>文章字段</name><type>4</type></XML><XSL><xsl:template match="TMPL/Article"><xsl:value-of select="chvSTCName" disable-output-escaping="yes"/></xsl:template></XSL><PluginEnd-->
</a></div>
             <div class="gg_le_mx">
                 <div class="ggbt"><span>相关内容</span></div>
                 <ul>
                  <a name="Plugin">
<!--PluginBegin><XML><name>文章所在栏目的文章列表</name><type>21</type><totalcount>4</totalcount></XML><XSL><xsl:template match="TMPL"><xsl:for-each select="Article"> <li><a href="{chvFullURL}"><xsl:value-of select="chvTitle" disable-output-escaping="yes"/></a></li></xsl:for-each></xsl:template></XSL><PluginEnd-->
</a>
                  
                 </ul>
             </div>
        </div>
        <div class="gg_rh">
            <div id="slider">
            <a name="Plugin">
<!--PluginBegin><XML><name>文章字段</name><type>4</type></XML><XSL><xsl:template match="TMPL/Article"><xsl:value-of select="txtContent" disable-output-escaping="yes"/></xsl:template></XSL><PluginEnd-->
</a>
            </div>
            <div class="gt2">
                <div id="pannel">
						<div id="drag"></div>
					</div>
              </div>
            </div> 
        </div>
    </div>
    </div>    
  </div>
</div>
<script type="text/javascript">
var o1 = document.getElementById('slider'),
	o2 = document.getElementById('pannel'),
	o3 = document.getElementById('drag');
function customBar(oSlider, oPanel, oTrigger){
	this.parent = oSlider.parentNode;
	this.slider = oSlider;
	this.panel = oPanel;
	this.trigger = oTrigger;
	
	this.h1 = this.parent.clientHeight;
	this.h2 = this.slider.offsetHeight;
	this.h3 = this.panel.clientHeight;
	this.h4 = this.trigger.offsetHeight;
	
	this.k = (this.h2 - this.h1)/(this.h3 - this.h4);
	this.dis = 0;
	this.flag = false;
	
	this.init();
}
customBar.prototype = {
	init: function(){
		if(this.k <= 0){
			this.panel.style.display = 'none';
			return;
		}
		this.slider.style.top = '0px';
		this.trigger.style.top = '0px';
		this.bind();		
	},
	bind: function(){
		var that = this;
		this.trigger.onmousedown = function(e){
			that.down.call(that, e);	
		}
		this.trigger.onmousemove = document.onmousemove = function(e){
			that.move.call(that, e);
		}
		this.trigger.onmouseup = document.onmouseup = function(e){
			that.up.call(that, e);
		}
	},
	down: function(e){
		var e = window.event || e,
			y1 = e.y || e.pageY,
			y2 = parseInt(this.trigger.style.top);
		this.dis = (y1 - y2);
		this.flag = true;
		this.move(e);
	},
	move: function(e){
		if(!this.flag) return;
		var e = window.event || e,
			y1 = e.y || e.pageY,
			dis;
		dis = Math.min(Math.max(y1 - this.dis, 0), (this.h3 - this.h4));
		this.slider.style.top = -dis * this.k + 'px';
		this.trigger.style.top = dis + 'px';
	},
	up: function(){
		this.flag = false;
	},
	wheel: function(){
		
	}
}
var ss = new customBar(o1, o2, o3);

</script>
<a name="CommonPlugin">
<!--CommonPluginBegin><XML><name>html网页公共</name><type>22</type><id>6</id></XML><XSL><xsl:template match="TMPL"></xsl></XSL><CommonPluginEnd-->
</a>
